<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度" v-if="true">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色" v-if="false">
        <el-color-picker v-model="optionsInfo.backgroundColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>
      <el-form-item label="字体颜色" v-if="false">
        <el-color-picker v-model="optionsInfo.fontColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>
      <!--企业Logo-->
      <div class="list-item-setting" v-if="true">
        <div class="title-info">
          <el-divider content-position="left">Logo设置</el-divider>
        </div>
        <el-form-item label="企业Logo" class="column-area">
          <el-button type="primary" @click="handleSelect">选择LOGO</el-button>
          <div class="picture-wrap">
            <template v-if="!!(optionsInfo?.imageUrl?.url)">
              <img :src="`${optionsInfo.imageUrl.url}`" alt="企业Logo"/>
              <p class="icon-wrap" @click="handleDeletePicture">
                <i class="el-icon-close icon-delete"/>
              </p>
            </template>
            <template v-else>
              <div class="el-upload el-upload--text" @click="handleSelect">
                <i class="el-icon-plus avatar-uploader-icon"/>
              </div>
            </template>
          </div>

        </el-form-item>
      </div>

    </div>
    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室设置</el-divider>
      </div>
      <el-form-item label="科室显示">
        <el-switch v-model="optionsInfo.contentShow"/>
      </el-form-item>
      <el-form-item label="科室名称">
        <el-input
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.content"
        />
      </el-form-item>

      <el-form-item label="字体大小">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.fontSize"
        />
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionsInfo.fontColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>

      <el-form-item label="距离底部距离">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.marginBottom"
        />
      </el-form-item>

    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">提示设置</el-divider>
      </div>
      <el-form-item label="提示显示">
        <el-switch v-model="optionsInfo.descriptorShow" @change="handleDescriptorShow"/>
      </el-form-item>
      <el-form-item label="提示内容">
        <el-input
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.descriptor"
        />
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.descriptorFontSize"
        />
      </el-form-item>

      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.descriptorColor"
        />
      </el-form-item>


      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.descriptorBackground"
        />
      </el-form-item>

      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo.descriptorFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="距离底部距离">
        <el-input-number
            size="small"
            v-model="optionsInfo.descriptorMarginBottom"
        />
      </el-form-item>
    </div>

    <!--时间设置*设备标签信息-->
    <div class="list-item-setting" :key="widgetKey">
      <div class="title-info">
        <el-divider content-position="left">时间&标签设置</el-divider>
      </div>

      <el-form-item label="视图模式" class="column-area">
        <el-select v-model="optionsInfo.dataTimeModal" placeholder="请选择">
          <el-option
              v-for="item in dataTimeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <template v-if="optionsInfo?.dataTimeModal !=='sign'">
        <el-form-item label="时间格式" class="column-area">
          <el-select v-model="optionsInfo.timeValue" placeholder="请选择">
            <el-option
                v-for="item in dateTimeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间日期位置交换" class="column-area">
          <el-switch
              @change="handleChangePosition"
              :disabled="!(optionsInfo.dateShow)"
              v-model="optionsInfo.changePosition"/>
        </el-form-item>
        <el-form-item label="日期隐藏" class="column-area">
          <el-switch v-model="optionsInfo.dateShow"/>
        </el-form-item>
      </template>

      <template v-else>
        <el-form-item label="标签信息" class="column-area">
          <el-input
              :min="0"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo.signInfo"
          />
        </el-form-item>
      </template>

    </div>

    <!--选择图片的弹层-->
    <SelectPicture
        :visible="PictureInfo.visible"
        :info="PictureInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />
  </div>
</template>

<script>
import {v4 as uuid} from "uuid";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import {dateTimeOptions} from "@c/public/form-designer/devType/datas-types";

export default {
  name: "reportHeaderConfig-editor",
  components: {SelectPicture},

  componentName: "reportHeaderConfig-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      widgetKey: uuid(),
      PictureInfo: {
        visible: false,
        info: 1,
      },
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
      dateTimeOptions: types['dateTimeOptions'],
      dataTimeOptions: [
        {
          value: 'dataTime',
          label: '时间-日期'
        },
        {
          value: 'sign',
          label: '类型信息'
        },
      ]
    }
  },

  methods: {
    //交换日期和时间
    handleChangePosition(val) {
      this.optionsInfo.changePosition = val;
    },

    handleDescriptorShow(val) {
      if (val) {
        this.optionsInfo.marginBottom = 180
      } else {
        this.optionsInfo.marginBottom = 0
      }
    },


    // 选择图片
    handleSelect() {
      Reflect.set((this.PictureInfo), 'visible', true);
      Reflect.set((this.PictureInfo), 'info', 1)
    },


    // 取消弹层
    handleCancel() {
      Reflect.set((this.PictureInfo), 'visible', false);
    },

    // 替换LOGO
    handleSure(info) {
      if (info) {
        this.optionsInfo.imageUrl = info.val
      }
    },

    // 删除logo
    handleDeletePicture() {
      this.optionsInfo.imageUrl = null
    }


  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.widgetKey = uuid();
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;
      background: rgba(232, 232, 232, 0.4);

      img {
        border-radius: 6px;
        overflow: hidden;
        width: calc(100% - 2px);
        height: 60px;
        object-fit: contain;
        border: 1px dashed #c0ccda;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        //object-fit: cover;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }

    .el-select {
      width: 100%;
    }
  }
}
</style>